<template>
    <div>
        <div class="custom-tree">
            <el-tree :data="treeData" :props="defaultProps" default-expand-all>
                <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span>{{ node.label }}</span>
                    <span class="custom-tree-node-span">
                        <el-button type="text" v-if="data.parentId !== '0'" size="mini" @click="openFormDialog(data)">
                            增加
                        </el-button>
                        <el-button type="text" size="mini" v-if="data.id !== '0'" @click="editFormDialog(node, data)">
                            编辑
                        </el-button>
                        <el-button type="text" size="mini" v-if="data.id !== '0'" @click="handleDelete(data)">
                            删除
                        </el-button>
                    </span>
                </span>
            </el-tree>
        </div>

        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" :before-close="closeFormDialog">
            <el-form :model="formData" :rules="rules" ref="dialogForm">
                <el-form-item label="上级分类" :label-width="labelwidth" prop="parentName">
                    <el-input v-model="formData.parentName" autocomplete="off" disabled></el-input>
                </el-form-item>

                <el-form-item label="分类名称" :label-width="labelwidth" prop="name">
                    <el-input v-model="formData.name" autocomplete="off" clearable></el-input>
                </el-form-item>

                <el-form-item label="简要说明" :label-width="labelwidth" prop="note">
                    <el-input v-model="formData.note" autocomplete="off" clearable></el-input>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="closeFormDialog">取 消</el-button>
                <el-button type="primary" @click="saveForm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import api from '../../../api/admin/articleclassesApi.js'
export default ({
    name: 'articlesclass',
    data() {
        return {
            treeData: [],
            formData: {},
            dialogTitle: '',
            dialogFormVisible: false,
            labelwidth: '100px',
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            rules: {
                name: [
                    { required: true, message: "请输入分类名称", trigger: "blur" }
                ]
            }
        }
    },
    methods: {
        //删除单行记录
        handleDelete(row) {
            this.$confirm('确定删除当前记录', '删除提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                api.Delete(row.id).then(res => {
                    this.$message({ message: '删除成功', type: 'success' })
                    this.onSearch()
                })
            }).catch(() => {
                return
            });
        },
        //打开创建编辑窗口
        openFormDialog(data) {
            this.formData.parentName = data.name;
            this.formData.parentId = data.id;
            this.dialogTitle = '创建分类'
            this.dialogFormVisible = true
        },
        editFormDialog(node, data) {
            this.formData = Object.assign({}, data);
            this.formData.parentName = node.parent.data.name;
            this.dialogTitle = '编辑分类'
            this.dialogFormVisible = true;
        },
        //关闭创建编辑窗口
        closeFormDialog() {
            this.$refs.dialogForm.resetFields()
            this.formData = {}
            this.dialogFormVisible = false
        },
        //保存创建及编辑
        saveForm() {
            this.$refs.dialogForm.validate((valid) => {
                if (valid) {
                    if (this.isEdit) {
                        api.Update(this.formData).then(res => {
                            this.$message({ message: '操作成功', type: 'success' })
                            this.onSearch()
                            this.closeFormDialog()
                        })
                    } else {
                        api.Create(this.formData).then(res => {
                            this.$message({ message: '操作成功', type: 'success' })
                            this.onSearch()
                            this.closeFormDialog()
                        })
                    }

                }
            });
        },
        //搜索
        onSearch() {
            api.getTree("0").then(res => {
                this.treeData = res.data.data
            });
        }
    },
    computed: {
        isEdit() {
            return this.formData.id != undefined
        }
    },
    mounted() {
        this.onSearch()
    }
})
</script>

<style>
.custom-tree {
    widows: 350px;
}

.custom-tree-node-span {
    font-size: 14px;
    margin-left: 2em;
}
</style>